Ext.onReady(function(){
	//创建数据集
	var st = Ext.create('Ext.data.ArrayStore',{
		data:[
			['4','男','name4','descn4','1993-08-07T15:58:04','#F5C0C0'],
			['1','女','name1','descn1','1993-08-07T15:58:04','#F5C0C0'],
			['3','男','name3','descn3','1993-08-07T15:58:04','#99CC99'],
			['5','女','name5','descn5','1993-08-07T15:58:04','#FBF8BF'],
			['6','女','name6','descn6','1993-08-07T15:58:04','#FBF8BF'],
			['7','女','name7','descn7','1993-08-07T15:58:04','#FBF8BF'],
			['8','女','name8','descn8','1993-08-07T15:58:04','#FBF8BF'],
			['9','女','name9','descn9','1993-08-07T15:58:04','#FBF8BF'],
			['10','女','name10','descn10','1993-08-07T15:58:04','#FBF8BF'],
			['11','女','name11','descn11','1993-08-07T15:58:04','#FBF8BF'],
			['12','女','name12','descn12','1993-08-07T15:58:04','#FBF8BF'],
			['2','男','name2','descn2','1993-08-07T15:58:04','']
		],
		fields:[
			{name:'id'},
			{name:'sex'},
			{name:'name'},
			{name:'descn'},
			{name:'date',type:'date',dataFormat:'Y-m-dTH:i:s'},
			{name:'color'}
		],
		pageSize:10
	});
	
	//创建grid组建
	var grid = Ext.create('Ext.grid.Panel',{
		autoHeight:true,
		renderTo:'grid1',
		columns:[
			new Ext.grid.RowNumberer(),
			{header:'编号',dataIndex:'id',sortable:true},
			{header:'名称',dataIndex:'name'},
			{header:'性别',dataIndex:'sex',renderer:renderSex},
			{header:'描述',dataIndex:'descn',renderer:renderDescn},
			{header:'日期',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('Y-m-d')},
			{header:'颜色',dataIndex:'color'}
		],
		store:st,
		//显示斑马效果
		stripeRows:true,
		//读取数据时的遮罩和提示’loading‘
		loadMask:true,
		//自动宽度
		forceFit:true,
		//复选框
		selModel:new Ext.selection.CheckboxModel(),
		//行选择模型（默认），设置mode:'SINGLE' 只能选择一行
		selType:new Ext.selection.RowModel({mode:'SINGLE'}),
		//表格的 UI视图配置,任何对于Ext.view.Table所使用到的配置选项都在这里被指定
		viewConfig:{
			enableRowBody:true,
			getRowClass:function(record,rowIndex,p,ds){
				var cls = 'white-row';
				switch(record.getData().color){
					case '#FBF8BF' :
						cls = 'yellow-row';
						break;
					case '#99CC99' :
						cls = 'green-row';
						break;
					case '#F5C0C0' :
						cls = 'red-row';
						break;
				}
				return cls;
			}
		},
		dockedItems: [{
	        xtype: 'pagingtoolbar',
	        store: st,   // GridPanel中使用的数据
	        dock: 'bottom',
	        displayInfo: true,
	        displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',
			emptyMsg:'没有记录'
	    }]
		//禁止改变列的宽度
		//enableColumnResize:false,
		//禁止拖放
		//enableColumnMove:false
	});
	//如果有分页工具条，数据集要在构造表格后再加载，保证工具条有作用
	st.load({
	    params:{
	        start:0,
	        limit: 10,
	        foo:'bar'
	    }
	});
	
	//删除第二行
	Ext.get('remove').on('click',function(){
		st.remove(st.getAt(1));
		//刷新viewTable，grid也就会重新计算行号
		grid.getView().refresh();
	});
	
	grid.on('itemclick',function(){
		var selected = grid.getSelectionModel().selected;
		for(var i = 0; i < selected.getCount(); i++) {
			var record = selected.get(i);
			Ext.Msg.alert('提示',record.get('id') + ',' + record.get('name') + 
				',' + record.get('descn')
			);
		}
	});
});

function renderSex(value){
	if(value == '男'){
		return '<span style="color:red;font-weight:bold">男</span>'
	}else{
		return '<span style="color:green;font-weight:bold">女</span>'
		
	}
}

function renderDescn(value,cellmeta,record,rowIndex,columnIndex,store){
	var str = "<input type='button' value='查看详细信息' onclick='alert(\""+
		"这个单元格的值是：" + value + "\\n" + 
		"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + 
		",css:" + cellmeta.css + "}\\n" +
		"这个单元格的record是：" + record + ",一行的数据都在里边\\n" + 
		"这是第" + rowIndex + "行\\n" + 
		"这是第" + columnIndex + "列\\n" + 
		"这个表格对应的Ext.data.Store在这里：" + store + ",随便用吧。" +
	"\")'>";
	return str;
}